import { format } from 'date-fns';
import { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';
import BackButton from 'src/component/BackButton';
import { Page } from 'src/constant/Page';
import { ThemeContext } from 'src/context/ThemeContext';
// import { DepositRecord } from 'src/model/Deposit';
// import { getDepositsWithId } from 'src/service/propertyService';
import { bnFormat } from 'src/util/bigNumber';
import style from './DepositDetail.module.scss';

type DepositRecord = any

const DepositDetail = () => {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const { IcCopy } = useContext(ThemeContext).image;
    const { recordId } = useParams();
    const [record, setRecord] = useState<DepositRecord>();

    useEffect(() => {
        if (recordId === undefined) {
            navigate(Page.Record, { replace: true });

            return;
        }

        // getDepositsWithId(recordId)
        //     .then((res) => {
        //         setRecord(res);
        //     })
        //     .catch(() => {
        //         navigate(Page.Record, { replace: true });
        //     });
    }, [recordId]);

    return (
        <div>
            <BackButton />
            <div className={style.heading}>
                {t('recordDetail.heading', { type: t('recordDetail.desc.deposit') })}
            </div>
            {record && (
                <>
                    <div className={style.amount}>{`${bnFormat(
                        record.amount,
                    )} ${record.coin.toUpperCase()}`}</div>
                    <div className={style.infoBlock}>
                        <div className={style.item}>
                            <div className={style.label}>{t('recordDetail.desc.type')}</div>
                            <div className={style.value}>
                                {record.transactionHash === null
                                    ? t('recordDetail.desc.internalTransfer')
                                    : t('recordDetail.desc.deposit')}
                            </div>
                        </div>
                        <div className={style.item}>
                            <div className={style.label}>{t('recordDetail.desc.time')}</div>
                            <div className={style.value}>
                                {format(Date.parse(record.createdAt), 'yyyy/MM/dd HH:mm:ss')}
                            </div>
                        </div>
                    </div>
                    <div className={style.divider} />
                    <div className={style.detailBlock}>
                        <div className={style.item}>
                            <div className={style.label}>
                                {t('recordDetail.desc.address')}
                                <img src={IcCopy} className={style.copyIcon} />
                            </div>
                            <div className={style.value}>{record.address}</div>
                        </div>
                        {record.transactionHash && (
                            <div className={style.item}>
                                <div className={style.label}>
                                    {t('recordDetail.desc.txId')}
                                    <img src={IcCopy} className={style.copyIcon} />
                                </div>
                                <div className={style.value}>{record.transactionHash}</div>
                            </div>
                        )}
                    </div>
                </>
            )}
        </div>
    );
};

export default DepositDetail;
